<template>
  <view class="category-container">
    <searchBar></searchBar>
    <!-- 底部 -->
    <view class="bottom">
      <!-- 左侧 -->
      <scroll-view scroll-y="true" class="left">
        <view class="item" v-for="(item,index) in categoryList" 
        :key="item.cat_id" :class="{ active: activeIndex ===index }"
          @tap="activeIndex = index">
          {{item.cat_name}}
        </view>
      </scroll-view>
      <!-- 右侧 -->
      <scroll-view scroll-y="true" class="right">
        <!-- 顶部图片 -->
        <image class="banner" src="../../static/images/titleImage.png" mode=""></image>
        <!-- 区域 -->
        <view class="pro-section" v-for="item in categoryList[activeIndex].children" :key="item.cat_id">
          <view class="title">
            / <text>{{item.cat_name}}</text> /
          </view>
          <!-- 列表区域 -->
          <view class="pro-items">
            <view class="item" v-for="it in item.children" :key="it.cat_id">
              <image :src="it.cat_icon" mode=""></image>
              <text>{{it.cat_name}}</text>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
  import searchBar from '../../components/searchBar.vue'
  export default {
    components: {
      searchBar
    },
    data() {
      return {
        // 分类数据
        categoryList: [],
        // 高亮
        activeIndex: 0
      }
    },
    onLoad() {
      this.$request({
        url: '/api/public/v1/categories',
        method: 'get'
      }).then(res => {
        // console.log(res)
        this.categoryList = res;
      })
    },
    methods: {

    }
  }
</script>

<style lang="less">
  .category-container {
    position: relative;
    height: 100vh;

    .bottom {
      position: absolute;
      top: 90rpx;
      bottom: 0;
      width: 100%;
      display: flex;

      .left {
        width: 200rpx;
        // background-color: skyblue;

        .item {
          background-color: #f4f4f4;
          height: 100rpx;
          line-height: 100rpx;
          text-align: center;

          &.active {
            background-color: white;
            color: #fe2c4b;
            position: relative;

            &::before {
              content: '';
              position: absolute;
              left: 0;
              height: 60rpx;
              top: 20rpx;
              background-color: #fe2c4b;
              width: 10rpx;
            }
          }
        }
      }

      .right {
        flex: 1;
        // background-color: pink;
        padding: 20rpx 16rpx;

        .banner {
          width: 520rpx;
          height: 180rpx;
        }

        .pro-section {
          margin-top: 35rpx;

          .title {
            text-align: center;
            color: #dadada;
            margin-bottom: 50rpx;

            text {
              color: black;
              margin: 0 35rpx;
            }
          }

          .pro-items {
            display: flex;
            // 换行
            flex-wrap: wrap;
          }

          .item {
            width: 33.33333%;
            text-align: center;
            font-size: 25rpx;
          }

          image {
            display: block;
            width: 120rpx;
            height: 120rpx;
            margin: 0 auto;
          }
        }
      }
    }
  }
</style>
